<template>
  <div>
    <el-dialog v-bind="$attrs" v-on="$listeners" @open="onOpen" @close="onClose" title="责任人变更" :visible.sync="visible">
      <el-form ref="" :model="formData" :rules="rules" size="medium" label-width="100px">
        <el-form-item label="项目名称" prop="field101">
          <el-input v-model="formData.field101" placeholder="请输入项目名称" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="节点选择" prop="field102">
          <el-date-picker v-model="formData.field102" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                          :style="{width: '100%'}" placeholder="请选择节点选择" clearable></el-date-picker>
        </el-form-item>
        <el-form-item label="提交日期" prop="field103">
          <el-select v-model="formData.field103" placeholder="请选择提交日期" clearable :style="{width: '100%'}">
            <el-option v-for="(item, index) in field103Options" :key="index" :label="item.label"
                       :value="item.value" :disabled="item.disabled"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="原责任人" prop="field104">
          <el-select v-model="formData.field104" placeholder="请选择原责任人" clearable :style="{width: '100%'}">
            <el-option v-for="(item, index) in field104Options" :key="index" :label="item.label"
                       :value="item.value" :disabled="item.disabled"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="新责任人" prop="field105">
          <el-select v-model="formData.field105" placeholder="请选择新责任人" clearable :style="{width: '100%'}">
            <el-option v-for="(item, index) in field105Options" :key="index" :label="item.label"
                       :value="item.value" :disabled="item.disabled"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="planName" label="审核状态">
          <div style="width: 300px;">
            <el-steps :active="1" align-center finish-status="success">
              <el-step title="组长" description="已上报"></el-step>
              <el-step title="部长" description="审批中"></el-step>
              <el-step title="变更成功" description=""></el-step>
            </el-steps>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer">
<!--        <el-button @click="close">取消</el-button>-->
<!--        <el-button type="primary" @click="handelConfirm">确定</el-button>-->
      </div>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    inheritAttrs: false,
    components: {},
    props: [],
    data() {
      return {
        visible: true,
        formData: {
          field101: 'xxxx项目',
          field102: '2020-04-13',
          field103: 1,
          field104: 1,
          field105: 1,
        },
        rules: {
          field101: [{
            required: true,
            message: '请输入项目名称',
            trigger: 'blur'
          }],
          field102: [{
            required: true,
            message: '请选择节点选择',
            trigger: 'change'
          }],
          field103: [{
            required: true,
            message: '请选择提交日期',
            trigger: 'change'
          }],
          field104: [{
            required: true,
            message: '请选择原责任人',
            trigger: 'change'
          }],
          field105: [{
            required: true,
            message: '请选择新责任人',
            trigger: 'change'
          }],
        },
        field103Options: [{
          "label": "xxx节点",
          "value": 1
        }, {
          "label": "选项二",
          "value": 2
        }],
        field104Options: [{
          "label": "张三",
          "value": 1
        }, {
          "label": "李四",
          "value": 2
        }],
        field105Options: [{
          "label": "张三",
          "value": 1
        }, {
          "label": "李四",
          "value": 2
        }],
      }
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {
      this.visible = true
    },
    methods: {
      onOpen() {},
      onClose() {
        this.$refs[''].resetFields()
      },
      close() {
        this.$emit('update:visible', false)
      },
      handelConfirm() {
        this.$refs[''].validate(valid => {
          if (!valid) return
          this.close()
        })
      },
    }
  }


</script>
<style>
</style>
